<!--
 @description 门店新建-门店交接情况
 @fileName Handover.vue
 @author zengqiongying
 @created 2023/04/30 18:09:29
-->
<template>
  <div class="has-foot-pb">
    <Card>
      <!-- <Cell title="是否属于交接门店" custom :right="false" required>
        <qmp-switch v-model="isMarketConnect"  :active-value="1" :inactive-value="0" @change="handleMarketConnect">
          <template #background>
            <span class="qmp-switch__background"> {{ isMarketConnect===1 ? '是' : '否' }}</span>
          </template>
        </qmp-switch>
      </Cell> -->
      <FieldSelect
        v-model="isMarketConnect"
        title="是否属于交接门店"
        label-name="dictName"
        value-name="dictCode"
        :optionData="[
          { dictName: '是', dictCode: '1' },
          { dictName: '否', dictCode: '0' }
        ]"
        required
        @change="handleMarketConnect"
        clear
      />
    </Card>
    <template v-if="[1, '1'].includes(isMarketConnect)">
      <Card v-for="(item, i) in list" :key="`${i}-${item.id}`">
        <template #title>
          <div class="card-header">
            <span class="name"><span class="icon"></span>交接账号{{ i + 1 }}</span>
            <span class="btn-del" @click="onDelete(i)"></span>
          </div>
        </template>
        <HandoverItem
          v-model="list[i]"
          @search-account="(val) => onSearchAccount(i, val)"
          @search-shop="onSearchShop(i)"
          @search-customer="onSearchCustomer(i)"
        />
      </Card>
      <Card>
        <div class="btn-add-larg" @click="onCreat">
          <qmp-icon name="plus" />
          新增交接业务账号
        </div>
      </Card>
      <Card title="附件上传">
        <Cell title="经销商交接证明" is-column custom required :right="false">
          <div style="color: red; font-size: 10px; margin-bottom: 5px">
            交接证明签订一式三份，双方各自保留一份，邮寄公司一份
          </div>
          <AttachmentUpload v-model="attachment.handoverFiles" type-code="ACCESS063" :objectId="detail.id" />
        </Cell>
        <Cell title="经销商关系证明" is-column custom :required="hasIsTransferSales" :right="false">
          <AttachmentUpload v-model="attachment.relativeFiles" type-code="ACCESS064" :objectId="detail.id" />
        </Cell>
        <Cell title="交接双方现场签订照片" is-column custom :required="hasIsTransferSales" :right="false">
          <AttachmentUpload v-model="attachment.handoverSiteFiles" type-code="ACCESS111" :objectId="detail.id" />
        </Cell>
        <Cell v-if="Object.keys(detail).length > 0" title="交接双方现场签订照片模板下载" is-column custom readonly>
          <AttachmentUpload v-if="templateFileList.ACCESS111.length" v-model="templateFileList.ACCESS111" readonly />
          <div v-else>暂无文件</div>
        </Cell>
      </Card>
    </template>

    <div :class="['ctm-content-foot', { relative: keyboard.show }]">
      <div class="btn radius-larg ctm-btn-main" @click="onSave()">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, getCurrentInstance, nextTick } from 'vue'
  import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
  import { useStore } from 'vuex'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import FieldSelect from '@/components/FieldSelect/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import HandoverItem from '../components/Handover/Item.vue'
  import { detail } from '@/apis/dealerMarketing/NewShop'
  import { createHandoverMixin } from '../mixins/Handover'
  import GetKeyboardMixin from '@/utils/useKeyboard'

  export default {
    name: 'DealerNewShopHandover',
    components: { Card, Cell, FieldSelect, AttachmentUpload, HandoverItem },
    setup() {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $store = useStore()
      const $router = useRouter()
      const $route = useRoute()
      const {
        datas,
        getDetail,
        onCreat,
        onDelete,
        onSave,
        onSearchAccount,
        onSearchShop,
        onSearchCustomer,
        handleMarketConnect,
        hasIsTransferSales,
        downTemplate
      } = createHandoverMixin('DealerNewShopHandover', $router, detail, () => {
        proxy.$SimpleEvents.emit('refreshCustomerNewShopEditInfo', datas.id)
        nextTick(() => {
          $router.goBack()
        })
      })

      datas.id = $route.query?.id || ''
      datas.keyboard = {
        show: false
      }
      datas.keyboard = GetKeyboardMixin()
      datas.hasIsTransferSales = hasIsTransferSales

      onBeforeRouteLeave((to, from, next) => {
        const instanceName = instance?.type?.name
        const toName: any = to.name
        if (!['SearchShop', 'SearchAccount', 'SearchBusinessCustomer'].includes(toName)) {
          $store.commit('routerKeep/removeCache', instanceName)
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
        }
        next()
      })

      downTemplate()
      getDetail()

      return {
        ...toRefs(datas),
        onSave,
        onDelete,
        onCreat,
        onSearchAccount,
        onSearchShop,
        onSearchCustomer,
        handleMarketConnect
      }
    }
  }
</script>
<style lang="less" scoped>
  @import url('../styles/common.less');
  .tip {
    font: var(--font-main-body);
    color: var(--texticon-default-normal);
  }
</style>
